<script setup lang="js">
import { onMounted, ref, computed, watch } from 'vue'
import {useRoute, useRouter} from 'vue-router'
import { getOtherUserInfo, getPrivacySettingsById } from "@/api/user"
import { getFavoriteShopsById } from "@/api/store"
import { getCurUserReviewsById } from "@/api/review"


// 引入工具
import { ElImageViewer } from 'element-plus'
import { format } from 'date-fns'

// 路由实例
const router = useRouter()
const route = useRoute()
const id = ref(route.params.id)

// 他人隐私设置
const privacySettings = ref(0)
const getPrivacySettings = () => {
  getPrivacySettingsById(id.value).then(res => {
    privacySettings.value = res.data
    console.info(privacySettings.value)
  })
}

// 用户信息
const curUser = ref({
  id: null,
  username: '',
  nickname: '',
  avatarUrl: '',
  gender: 0,
  birthday: '',
  signature: '',
})

// 收藏相关数据
const collectedShops = ref([]) // 全部收藏
const visibleShops = ref([]) // 显示的前4个收藏（未搜索时）
const showAllFavorites = ref(false) // 控制弹窗显示
const searchKeyword = ref('') // 搜索关键词绑定

// 评论相关数据
const popularComments = ref([])

// 搜索过滤后的收藏店铺（核心逻辑）
const filteredShops = computed(() => {
  if (!searchKeyword.value.trim()) {
    // 无搜索关键词时，返回全部收藏
    return collectedShops.value
  }
  // 有搜索关键词时，过滤出名称或类别匹配的店铺
  const keyword = searchKeyword.value.trim().toLowerCase()
  console.log('搜索关键词:', keyword) // 调试日志

  return collectedShops.value.filter(shop => {
    // 匹配店铺名称（忽略大小写）
    const matchName = shop.name?.toLowerCase().includes(keyword) || false
    // 匹配店铺类别（忽略大小写）
    const matchCategory = shop.category?.toLowerCase().includes(keyword) || false
    return matchName || matchCategory
  })
})

// 搜索过滤后的显示店铺（前4个）
const filteredVisibleShops = computed(() => {
  return filteredShops.value.slice(0, 4)
})

// 跳转到店铺详情页
const goToStoreDetails = (storeId) => {
  router.push(`/user/storeDetailsPage/${storeId}`)
}

// 获取用户信息
const getCurUser = () => {
  getOtherUserInfo(id.value).then(res => {
    curUser.value = res.data
  })
}

// 获取收藏店铺
const getCurUserFavoriteShops = () => {
  getFavoriteShopsById(id.value).then(res => {
    collectedShops.value = res.data || []
    visibleShops.value = (res.data || []).slice(0, 4)
  })
}

// 获取评论
const getCurUserReviews = () => {
  getCurUserReviewsById(id.value).then(res => {
    popularComments.value = res.data
  })
}

// 时间格式化
const formatTime = (timeStr) => {
  if (!timeStr) return ''
  return format(new Date(timeStr), 'yyyy-MM-dd HH:mm')
}

// 图片预览
const showImageViewer = ref(false)
const currentImageUrl = ref('')
const previewImage = (url) => {
  currentImageUrl.value = url
  showImageViewer.value = true
}

// 监听搜索关键词变化
watch(searchKeyword, (newVal) => {
  console.log('搜索关键词变化:', newVal)
  console.log('过滤结果:', filteredShops.value)
})

// 初始化加载
onMounted(() => {
  getCurUser()
  getPrivacySettings()
  getCurUserFavoriteShops()
  getCurUserReviews()
})
</script>

<template>
  <div class="home-container">
    <!-- 头部区域 -->
    <header class="header">
      <div class="user-container">
        <!-- 左侧：头像与昵称组合 -->
        <div class="avatar-group">
          <div class="avatar-frame">
            <img :src="curUser.avatarUrl" alt="用户头像" class="avatar" />
            <span class="online-indicator"></span>
          </div>
          <span class="nickname">{{ curUser.nickname }}</span>
        </div>

        <!-- 中间：个人信息区域 -->
        <div class="user-info">
          <div class="info-row">
            <span class="info-label">性别</span>
            <span class="info-value">{{ curUser.gender === 1 ? '男' : curUser.gender === 2 ? '女' : ' 未知' }}</span>
          </div>
          <div class="info-row">
            <span class="info-label">生日</span>
            <span class="info-value">{{ curUser.birthday }}</span>
          </div>
          <div class="info-row signature-row">
            <span class="info-label">签名</span>
            <span class="info-value signature">{{ curUser.signature }}</span>
          </div>
        </div>
      </div>

      <!-- 右侧：通知图标 -->
      <div class="notifications">
        <button class="notification-btn">
          <i class="icon-bell">🔔</i>
        </button>
      </div>
    </header>

    <!-- 搜索栏 -->
    <div class="search-bar">
      <input
          type="text"
          placeholder="搜索店铺或类别"
          v-model="searchKeyword"
          @input="() => {}"
      />
      <button class="search-btn" @click="() => {}">
        搜索
      </button>
    </div>

    <!-- 我的收藏 -->
    <section class="my-favorites">
      <div class="section-header">
        <div class="title-group">
          <h2>用户收藏</h2>
          <span class="count-badge">{{ filteredShops.length }}</span>
        </div>
        <button class="view-all" @click="showAllFavorites = true" v-if="privacySettings===0">
          查看全部
        </button>
      </div>

      <div class="favorite-list" v-if="privacySettings===0">
        <!-- 显示过滤后的前4个店铺 -->
        <div v-for="shop in filteredVisibleShops" :key="shop.id" class="favorite-item">
          <div class="shop-image-container">
            <img :src="shop.coverImage" alt="店铺封面" class="shop-cover" />
            <button class="uncollect-btn" title="取消收藏">
              <i class="icon-heart">❤️</i>
            </button>
          </div>
          <div class="shop-info">
            <h3 class="shop-name">{{ shop.name }}</h3>
            <div class="shop-meta">
              <span class="category-tag">{{ shop.category }}</span>
              <div class="rating-star">
                <i class="star">★</i>
              </div>
            </div>
            <button class="visit-btn" @click="goToStoreDetails(shop.id)">
              进入店铺
            </button>
          </div>
        </div>

        <!-- 空状态提示 -->
        <div v-if="filteredVisibleShops.length === 0" class="empty-favorites">
          <div class="empty-icon">🔍</div>
          <div class="empty-text">
            {{ searchKeyword ? '未找到匹配的店铺' : '暂无收藏的店铺' }}
          </div>
          <div class="empty-desc">
            {{ searchKeyword ? '请尝试其他关键词' : '快去探索并收藏喜欢的店铺吧~' }}
          </div>
        </div>
      </div>
      <div v-else>
        <div class="privacyLock">
          <div class="empty-icon">🔒</div>
          <div class="empty-text">隐私保护已开启</div>
        </div>
      </div>
    </section>

    <!-- 全部收藏弹窗 -->
    <el-dialog
        v-model="showAllFavorites"
        title="我的全部收藏"
        :width="filteredShops.length > 6 ? '80%' : 'auto'"
        :max-width="800"
        :modal="true"
    >
      <div class="all-favorites-container">
        <div class="all-favorites-list">
          <div v-for="shop in filteredShops" :key="shop.id" class="all-favorite-item">
            <img :src="shop.coverImage" alt="店铺封面" class="all-shop-cover" />
            <div class="all-shop-info">
              <h4 class="all-shop-name">{{ shop.name }}</h4>
              <div class="all-shop-meta">
                <span class="all-category-tag">{{ shop.category }}</span>
                <div class="all-rating">
                  <i class="all-star">★</i>
                </div>
              </div>
            </div>
            <button class="all-visit-btn" @click="goToStoreDetails(shop.id)">
              进入店铺
            </button>
          </div>
        </div>
        <!-- 弹窗空状态 -->
        <div v-if="filteredShops.length === 0" class="empty-hint">
          {{ searchKeyword ? '未找到匹配的店铺' : '暂无收藏的店铺' }}
        </div>
      </div>
    </el-dialog>

    <!-- 热门评论 -->
    <section class="popular-comments">
      <div class="section-header">
        <h2>用户店铺评价</h2>
      </div>

      <div class="comment-list" v-if="privacySettings===0">
        <div v-for="comment in popularComments" :key="comment.id" class="comment-item">
          <!-- 左侧：用户头像 + 昵称 -->
          <div class="user-info-left">
            <img :src="curUser.avatarUrl" alt="用户头像" class="comment-avatar" />
            <span class="comment-nickname">{{ curUser.nickname }}</span>
          </div>

          <!-- 右侧：评论内容 -->
          <div class="comment-content-right">
            <div
                class="shop-title"
                @click="goToStoreDetails(comment.store.id)"
                style="cursor: pointer"
            >
              {{ comment.store.name }}
            </div>
            <div class="comment-text">{{ comment.contentText }}</div>
            <!-- 图片展示区域：仅当contentMedia有内容时显示 -->
            <div class="comment-media" v-if="comment.contentMedia && comment.contentMedia.length > 0">
              <div
                  v-for="(imgUrl, idx) in comment.contentMedia"
                  :key="idx"
                  class="media-item"
              >
                <img
                    :src="imgUrl"
                    alt="评论图片"
                    class="media-img"
                    @click="previewImage(imgUrl)"
                >
              </div>
            </div>
            <div class="comment-time">{{ formatTime(comment.createdAt) }}</div>
          </div>
        </div>
      </div>
      <div v-else>
        <div class="privacyLock">
          <div class="empty-icon">🔒</div>
          <div class="empty-text">隐私保护已开启</div>
        </div>
      </div>
    </section>

    <!-- 图片预览 -->
    <el-image-viewer
        v-if="showImageViewer"
        :url-list="[currentImageUrl]"
        @close="showImageViewer = false"
        class="image-viewer"
    ></el-image-viewer>
  </div>
</template>

<style scoped lang="scss">
// 全局样式变量（统一风格参数）
$theme-color: #409EFF;
$light-theme: #f0f7ff;
$border-radius: 12px;
$card-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
$hover-shadow: 0 6px 15px rgba(0, 0, 0, 0.08);
$transition-base: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

.home-container {
  padding: 1rem;
  background-color: #f5f7fa;
  max-width: 1200px; // 限制最大宽度，避免大屏拉伸
  margin: 0 auto; // 居中显示
}

// 头部区域
.header {
  display: flex;
  align-items: center;
  padding: 1.5rem 2rem;
  background: #fff;
  border-radius: $border-radius;
  box-shadow: $card-shadow;
  margin: 0 0 1.5rem;
  gap: 2.5rem;
  transition: $transition-base;

  &:hover {
    box-shadow: $hover-shadow;
  }

  .user-container {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 2.5rem; // 头像与信息区间距
  }

  .avatar-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;

    .avatar-frame {
      position: relative;
      width: 80px;
      height: 80px;
      border-radius: 50%;
      background: linear-gradient(135deg, $theme-color 0%, #69b1ff 100%);
      padding: 3px;
      box-shadow: 0 3px 12px rgba(64, 158, 255, 0.2);
      transition: $transition-base;

      &:hover {
        transform: scale(1.05) rotate(5deg);
        box-shadow: 0 5px 18px rgba(64, 158, 255, 0.3);
      }

      .avatar {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        object-fit: cover;
        border: 2px solid #fff;
        transition: $transition-base;

        &:hover {
          transform: scale(1.08);
        }
      }

      .online-indicator {
        position: absolute;
        bottom: 3px;
        right: 3px;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background-color: #52c41a;
        border: 2px solid #fff;
        box-shadow: 0 0 0 2px rgba(82, 196, 26, 0.2);
        animation: pulse 2s infinite;
      }
    }

    .nickname {
      font-size: 1.1rem;
      font-weight: 600;
      color: #333;
      white-space: nowrap;
      padding: 0.3rem 1rem;
      border-radius: 15px;
      background: $light-theme;
      transition: $transition-base;

      &:hover {
        transform: scale(1.05);
        box-shadow: 0 3px 8px rgba(64, 158, 255, 0.2);
      }
    }
  }

  .user-info {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    padding: 0.5rem 0;
    margin-left: 0.5rem;

    .info-row {
      display: flex;
      align-items: center;
      gap: 1rem;
      transition: $transition-base;

      &:hover {
        transform: translateX(5px);
      }

      .info-label {
        font-size: 0.95rem;
        color: #8c8c8c;
        width: 60px;
        text-align: right;
      }

      .info-value {
        font-size: 1rem;
        color: #333;
        padding: 0.2rem 0;
      }
    }

    .signature {
      color: $theme-color;
      font-size: 1rem;
      max-width: 550px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      font-style: italic;
      transition: $transition-base;

      &:hover {
        color: #6aaeff;
        text-decoration: underline;
        text-underline-offset: 2px;
        animation: marquee 10s linear infinite;
      }
    }
  }

  .notifications {
    .notification-btn {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background-color: $light-theme;
      color: $theme-color;
      border: none;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.4rem;
      cursor: pointer;
      transition: $transition-base;

      &:hover {
        background-color: #e6f4ff;
        transform: translateY(-2px) rotate(10deg);
        box-shadow: 0 3px 10px rgba(64, 158, 255, 0.2);
      }

      &:active {
        transform: translateY(0) rotate(0);
      }
    }
  }
}

// 搜索栏
.search-bar {
  margin: 0 0 1.5rem;
  display: flex;
  gap: 0.8rem;

  input {
    flex: 1;
    padding: 0.85rem 1rem;
    border: 1px solid #e0e0e0;
    border-radius: $border-radius;
    font-size: 1rem;
    transition: $transition-base;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cpath d='m21 21-4.3-4.3'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 12px center;
    padding-left: 40px;

    &:focus {
      outline: none;
      border-color: $theme-color;
      box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23409EFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cpath d='m21 21-4.3-4.3'%3E%3C/path%3E%3C/svg%3E");
    }

    &::placeholder {
      color: #b0b0b0;
    }
  }

  .search-btn {
    background-color: $theme-color;
    color: white;
    border: none;
    padding: 0.85rem 1.5rem;
    border-radius: $border-radius;
    font-size: 1rem;
    cursor: pointer;
    transition: $transition-base;
    display: flex;
    align-items: center;
    gap: 6px;

    &:hover {
      background-color: #3688e6;
      transform: translateY(-1px);
      box-shadow: 0 3px 8px rgba(64, 158, 255, 0.2);
    }

    &:active {
      transform: translateY(1px);
    }
  }
}

// 我的收藏
.my-favorites {
  background-color: #fff;
  padding: 1.2rem 1.5rem;
  border-radius: $border-radius;
  margin-bottom: 1.5rem;
  box-shadow: $card-shadow;

  .section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.2rem;

    .title-group {
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }

    h2 {
      font-size: 1.3rem;
      color: #333;
      font-weight: 600;
      position: relative;
      padding-left: 0.8rem;
      margin: 0;

      &::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 4px;
        height: 16px;
        background-color: $theme-color;
        border-radius: 2px;
      }
    }

    .count-badge {
      font-size: 0.85rem;
      color: #888;
      background-color: #f5f7fa;
      padding: 0.15rem 0.6rem;
      border-radius: 12px;
      white-space: nowrap;
      transition: $transition-base;

      &:hover {
        background-color: $light-theme;
        color: $theme-color;
      }
    }

    .view-all {
      color: $theme-color;
      font-size: 0.9rem;
      background: transparent;
      border: none;
      cursor: pointer;
      padding: 0.3rem 0.5rem;
      border-radius: 4px;
      transition: $transition-base;
      display: flex;
      align-items: center;
      gap: 5px;

      &:hover {
        background-color: $light-theme;
        transform: translateX(3px);
      }
    }
  }

  .favorite-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1.2rem;
  }

  .favorite-item {
    display: flex;
    flex-direction: column;
    border-radius: $border-radius;
    overflow: hidden;
    background-color: #fff;
    border: 1px solid #f0f0f0;
    transition: $transition-base;

    &:hover {
      transform: translateY(-4px) scale(1.01);
      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.07);
      border-color: #e6f4ff;
    }

    .shop-image-container {
      position: relative;
      height: 160px;
      overflow: hidden;

      .shop-cover {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.6s ease;
      }

      &:hover .shop-cover {
        transform: scale(1.08);
      }

      .uncollect-btn {
        position: absolute;
        top: 0.8rem;
        right: 0.8rem;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background-color: rgba(255, 255, 255, 0.9);
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1rem;
        color: #f56c6c;
        cursor: pointer;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        transition: $transition-base;

        &:hover {
          transform: scale(1.15) rotate(10deg);
          background-color: #fff;
        }

        &:active {
          transform: scale(0.95);
        }
      }
    }

    .shop-info {
      padding: 1rem;
      flex: 1;
      display: flex;
      flex-direction: column;
    }

    .shop-name {
      font-size: 1.1rem;
      color: #333;
      font-weight: 500;
      margin-bottom: 0.8rem;
      transition: $transition-base;

      &:hover {
        color: $theme-color;
        transform: translateX(3px);
      }
    }

    .shop-meta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 1rem;

      .category-tag {
        font-size: 0.85rem;
        color: #666;
        background-color: #f5f7fa;
        padding: 0.2rem 0.6rem;
        border-radius: 4px;
        transition: $transition-base;

        &:hover {
          background-color: $light-theme;
          color: $theme-color;
        }
      }

      .rating-star {
        display: flex;
        align-items: center;
        color: #FF9D26;

        .star {
          margin-right: 0.2rem;
          font-size: 1rem;
          transition: $transition-base;

          &:hover {
            transform: scale(1.2);
          }
        }

        .rating-value {
          font-weight: 500;
        }
      }
    }

    .visit-btn {
      background-color: $light-theme;
      color: $theme-color;
      border: 1px solid #e6f4ff;
      border-radius: 6px;
      padding: 0.55rem 0;
      font-size: 0.95rem;
      cursor: pointer;
      transition: $transition-base;
      margin-top: auto;

      &:hover {
        background-color: $theme-color;
        color: white;
        transform: translateY(-2px);
        box-shadow: 0 3px 8px rgba(64, 158, 255, 0.2);
      }

      &:active {
        transform: translateY(0);
      }
    }
  }
}

// 热门评论
.popular-comments {
  background-color: #fff;
  padding: 1.2rem 1.5rem;
  border-radius: $border-radius;
  margin-bottom: 1.5rem;
  box-shadow: $card-shadow;

  .section-header {
    display: flex;
    align-items: center;
    margin-bottom: 1.2rem;

    h2 {
      font-size: 1.3rem;
      color: #333;
      font-weight: 600;
      position: relative;
      padding-left: 0.8rem;
      margin: 0;

      &::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 4px;
        height: 16px;
        background-color: $theme-color;
        border-radius: 2px;
      }
    }

    .section-desc {
      font-size: 0.9rem;
      color: #888;
      margin-left: 0.8rem;
    }
  }

  .comment-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }

  .comment-item {
    display: flex;
    gap: 1.2rem;
    padding: 1rem 0;
    border-bottom: 1px solid #f5f7fa;
    transition: $transition-base;

    &:last-child {
      border-bottom: none;
    }

    &:hover {
      background-color: #fafafa;
      padding-left: 0.5rem;
      border-radius: 8px;
    }
  }

  .user-info-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 65px;

    .comment-avatar {
      width: 54px;
      height: 54px;
      border-radius: 50%;
      object-fit: cover;
      border: 2px solid $light-theme;
      box-shadow: 0 2px 6px rgba(64, 158, 255, 0.1);
      transition: $transition-base;

      &:hover {
        transform: scale(1.1) rotate(5deg);
        box-shadow: 0 4px 10px rgba(64, 158, 255, 0.2);
      }
    }

    .comment-nickname {
      font-size: 0.85rem;
      color: #666;
      margin-top: 0.5rem;
      white-space: nowrap;
      text-align: center;
      transition: $transition-base;

      &:hover {
        color: $theme-color;
        transform: scale(1.05);
      }
    }
  }

  .comment-content-right {
    flex: 1;
    padding-top: 0.3rem;

    .shop-title {
      font-size: 1.05rem;
      color: #333;
      font-weight: 500;
      margin-bottom: 0.6rem;
      display: inline-block;
      background-color: $light-theme;
      padding: 0.2rem 0.8rem;
      border-radius: 6px;
      transition: $transition-base;

      &:hover {
        background-color: $theme-color;
        color: white;
        transform: translateX(3px);
      }
    }

    .comment-text {
      font-size: 0.95rem;
      color: #555;
      line-height: 1.6;
      margin-bottom: 0.8rem;
      padding-right: 1rem;
      transition: $transition-base;

      &:hover {
        color: #333;
        transform: translateX(2px);
      }
    }

    .comment-time {
      font-size: 0.8rem;
      color: #999;
      margin-top: auto;
      display: inline-block;
      transition: $transition-base;

      &:hover {
        color: $theme-color;
      }
    }

    // 评论图片区域样式
    .comment-media {
      margin: 0.8rem 0;
      display: flex;
      gap: 0.8rem;
      flex-wrap: wrap; // 超过一行自动换行
      padding-right: 1rem;
    }

    .media-item {
      width: 100px; // 固定图片容器宽度
      height: 100px; // 固定图片容器高度
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
      cursor: pointer;
      transition: transform 0.3s, box-shadow 0.3s;

      &:hover {
        transform: scale(1.08) rotate(2deg);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
        z-index: 10;
      }

      .media-img {
        width: 100%;
        height: 100%;
        object-fit: cover; // 保持图片比例，填满容器
      }
    }
  }
}

// 全部收藏弹窗样式
.all-favorites-container {
  max-height: 60vh;
  overflow-y: auto;
  padding-right: 10px;
}

.all-favorites-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  padding: 10px 0;
}

.all-favorite-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 8px;
  background-color: #f9f9f9;
  transition: all 0.3s;

  &:hover {
    background-color: #f0f7ff;
    transform: translateX(4px) scale(1.02);
    box-shadow: 0 4px 12px rgba(64, 158, 255, 0.1);
  }

  .all-shop-cover {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
    transition: transform 0.3s;

    &:hover {
      transform: scale(1.1) rotate(3deg);
    }
  }

  .all-shop-info {
    flex: 1;
    min-width: 0; // 解决文字溢出问题
  }

  .all-shop-name {
    font-size: 16px;
    font-weight: 500;
    margin: 0 0 8px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: $transition-base;

    &:hover {
      color: $theme-color;
      transform: translateX(2px);
    }
  }

  .all-shop-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
  }

  .all-category-tag {
    color: #666;
    background-color: #f0f0f0;
    padding: 3px 8px;
    border-radius: 4px;
    transition: $transition-base;

    &:hover {
      background-color: $light-theme;
      color: $theme-color;
    }
  }

  .all-rating {
    color: #FF9D26;
    display: flex;
    align-items: center;
    gap: 4px;
  }

  .all-star {
    font-size: 14px;
    transition: $transition-base;

    &:hover {
      transform: scale(1.2);
    }
  }

  .all-visit-btn {
    background-color: transparent;
    color: $theme-color;
    border: 1px solid $theme-color;
    padding: 6px 14px;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    transition: $transition-base;

    &:hover {
      background-color: $theme-color;
      color: white;
      transform: translateY(-2px);
    }

    &:active {
      transform: translateY(0);
    }
  }
}

.all-favorites-container::-webkit-scrollbar-thumb:hover {
  background: #bbb;
}

// 适配小屏幕
@media (max-width: 768px) {
  .all-favorites-list {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  }
}

//空样式
.privacyLock {
  grid-column: 1 / -1; // 跨列显示
  text-align: center;
  padding: 4rem 2rem;
  color: #999;
  background-color: #f9f9f9;
  border-radius: $border-radius;
  transition: $transition-base;

  &:hover {
    background-color: #f0f0f0;
  }

  .empty-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    color: #ddd;
    transition: $transition-base;

    &:hover {
      transform: scale(1.1) rotate(10deg);
      color: #ccc;
    }
  }

  .empty-text {
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
  }

  .empty-desc {
    font-size: 0.95rem;
    color: #bbb;
  }
}

.empty-hint {
  text-align: center;
  padding: 40px 0;
  color: #999;
  font-size: 16px;
  background-color: #f9f9f9;
  border-radius: 8px;
  margin: 10px;
}

// 动画效果
@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(82, 196, 26, 0.4);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(82, 196, 26, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(82, 196, 26, 0);
  }
}

@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

// 穿透scoped样式
::v-deep .el-image-viewer {
  z-index: 9999 !important;
  transition: opacity 0.3s;
}

::v-deep .el-image-viewer__mask {
  background-color: rgba(0, 0, 0, 0.7) !important;
}

::v-deep .el-image-viewer__img {
  transition: transform 0.3s ease;

  &:hover {
    transform: scale(1.02);
  }
}

::v-deep .el-dialog {
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s;

  &:hover {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  }
}

::v-deep .el-dialog__header {
  background-color: $light-theme;
  padding: 16px 20px;

  .el-dialog__title {
    color: $theme-color;
    font-weight: 600;
  }
}

::v-deep .el-dialog__body {
  padding: 20px;
}

// 适配小屏幕
@media (max-width: 768px) {
  .all-favorites-list {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  }
}
</style>